<template>
  <div class="details">
    <!--导航栏开始-->
    <nav-tab :navIndex="(navTopIndex + 1)"></nav-tab>
    <!-- 横幅开始 -->
    <div class="ufo">
      <img src="../assets/creu.jpg" />
    </div>
    <!-- 横幅结束 -->
    <!-- 内容开始 -->
    <div class="conten">
      <h5>当前位置：首页>>产品中心>>{{ title }}</h5>
      <div class="top">
        <!--侧边栏开始 -->
        <div class="liebiao">
          <div class="navse">
            <ul>
              <li
                class="hand"
                v-for="(item, index) in shopnav"
                :key="item+index"
                :class="{ active: navIndex === index }"
                @click="selShopNav(item, index)"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
          <div class="navxe">
            <!-- <p>联系我们</p> -->
            <p>热线电话： {{configData.hotile}}</p>
            <p>手机：{{configData.mobile}}</p>
            <p>地址：{{configData.city}}</p>
            <!-- <p>金泰财富中心A座505</p> -->
          </div>
        </div>
        <!-- 侧边栏结束 -->
        <!-- 商品列表 -->
        <!-- <div class="listbox" v-show="!showdetailFlag">
          <div class="pro1">
            <ul>
              <li
                v-for="(item, index) in shopList"
                :key="index"
                @click="mouseOver(index)"
              >
                 @mouseleave="mouseLeave(index)" 
                <div class="item">
                  <em class="cc">{{ item.title }}</em>
                  <b>
                    <img class="aa" src="../assets/shuibeng.png" />
                    <img class="bb" src="../assets/shuibeng.png" />
                  </b>
                </div>
                <div class="cur" v-show="item.flag">
                  <em class="cc">立式多级消防泵</em>
                  <b>
                    <img class="aa" src="../assets/shuibeng.png" />
                    <img class="bb" src="../assets/shuibeng.png" />
                  </b>
                  <p>
                    <em>
                      {{ item.description || "内容无" }}
                    </em>
                    <strong @click="goshopDetail(item.id)">查看详情</strong>
                  </p>
                </div>
              </li>
              <p v-if="shopList.length < 1" style="text-align: center">
                暂无数据
              </p>
            </ul>
            <div class="clear"></div>
          </div>
        </div> -->
        <!-- 商品列表开始 -->
        <div class="ceshi0">
          <div
            class="ceshi"
            v-for="(item, index) in shopList"
            :key="item+index"
            v-show="!showdetailFlag"
            @click="goshopDetail(item.id)"
          >
            <div class="ceshi-top">
              <div class="ceshi1">
                <div class="ceshi-wenben">
                  <p>{{ item.description || "内容无" }}</p>
                </div>
                <div class="ceshi-btn">
                  <span class="hand" @click.stop="goshopDetail(item.id)">查看详情</span>
                  <span class="hand" @click="goimmediately()">立即咨询</span>
                </div>
              </div>
              <div class="ceshi2">
                <img v-if="item.img && item.img.length>0" :src="item.img[0]" />
              </div>
            </div>
            <div class="ceshi-foot">
              <p>{{ item.title }}</p>
            </div>
          </div>
          <div v-if="shopList.length<1">暂无数据</div>

          <!-- 商品列表结束 -->
          <!-- 详情开始 -->
          <div class="xiangqing" v-show="showdetailFlag">
            <div class="lishi">
              <div class="tu">
                <img v-if="shopDetail.img&&shopDetail.img.length>0" :src="showimg?showimg:shopDetail.img[0]" />
              </div>
              <div class="zixun">
                <h2>{{ shopDetail.title }}</h2>
                <div class="text">
                  <p>
                    <!-- XBD-L
                  型单级消防泵系立式单吸消防泵，供输送不含固体颗粒的清水及物理化学性质类似于水的液体之用。主要用于消防系统增压送水，也可用于厂矿给排水。输送液体的流量范围为5~80L/S，压力范围为
                  0.2~2.25Mpa,配套功率范围为1.5~200KW,口径范围为&50~&200mm。 -->
                    {{ shopDetail.description }}
                  </p>
                  <div><span @click="goimmediately()">立即咨询</span></div>
                </div>

                <div class="tupian" style="position: relative">
                  <swiper ref="swiper1" class="swiper swiper1" :options="swiperOption1" v-if="shopDetail.img&&shopDetail.img.length>0">
                    <div class="swiper-slide swipers" v-for="item in shopDetail.img" :key="'1'+item">
                      <img :src="item" @click.stop="showimg=item" />
                    </div>
                    <div class="swiper-pagination" slot="pagination"></div>
                  </swiper>
                </div>
              </div>
            </div>
            <div class="introduce" v-html="shopDetail.content">
              <!-- <img src="../assets/124.jpg" /> -->
            </div>
          </div>
        </div>
      </div>
      <!-- 商品列表结束 -->
      <div class="newsbox_btm" v-show="!showdetailFlag">
        <el-pagination
          background
          layout="prev, pager, next"
          prev-text="上一页"
          next-text=" 下一页 "
          :current-page.sync="page.cont"
          :page-size="page.size"
          :total="page.total"
          @size-change="sizechange"
          @current-change="sizechange"
        ></el-pagination>
      </div>
      <!-- 推荐 -->
      <div class="tuijian" v-show="showdetailFlag">
        <div class="wen">
          <h5>产品推荐</h5>
        </div>
        <div class="chanp">
          <div class="wenen" style="position: relative">
            <swiper ref="swiper" class="swiper" :options="swiperOption">
              <div class="swiper-slide" v-for="item in recommendList" :key="'2'+item">
                <img class="tuijianimg hand" :src="item.img[0]"  @click="goshopDetail(item.id)" />
              </div>
              <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
          </div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </div>
      </div>
      <!--  推荐-->
    </div>
    <!-- 内容结束 -->
    <!-- 页脚开始 -->
    <Footer></Footer>
  </div>
</template>

<script>
import NavTab from "../components/navtab";
import Footer from "../components/footer";
import Swiper from "swiper";
// import { Swiper, SwiperSlide } from "vue-awesome-swiper";
// import "swiper/swiper-bundle.css";
// import 'swiper/css/swiper.css'

export default {
  components: {
    NavTab,
    Footer,
  },
  data() {
    return {
      navTopIndex: 4,
      navIndex: 0,
      title: "消防水泵系列",
      shopnav: [], // 商品分类
      swiperOption: {
        notNextTick: false,
        slidesPerView: 5,
        spaceBetween: 30,
        // loop: true,
        // autoplay: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      swiperOption1: {
        notNextTick: false,
        // centeredSlides: true,
        slidesPerView: 3,
        spaceBetween: 10,
        // loop: true,
        // autoplay: true,
        // autoplay: {
        //   delay: 1000,
        //   disableOnInteraction: false,
        // },
      },
      page: {
        size: 6,
        cont: 1,
        allcont: 1,
        total: 10,
      },
      shopList: [],
      showdetailFlag: false, // 展示详情
      shopDetail: {}, // 商品详情
      search: '',
      recommendList: [], // 商品推荐列表
      configData: {},
      showimg: ''
    };
  },
  created() {
    //跳转到顶部
    window.scrollTo(0, 0);
    console.log(this.$route.query.num);
    if (this.$route.query.num && +this.$route.query.num < 4) {
      this.navTopIndex = +this.$route.query.num;
      this.navIndex = +this.$route.query.num;
    }
    this.navIndex = +this.$route.query.num;
    console.log("产品0", this.navIndex);
    if (
      navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
    ) {
      this.$router.push("/page/home_mobile");
    }
  },
  mounted() {
    document.title = '万力达消防设备大卖场'
    var swiper = new Swiper(".swiper-container", {
      pagination: ".swiper-pagination",
      slidesPerView: 3,
      paginationClickable: true,
      spaceBetween: 40,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    this.getShopClass();
    if (this.$route.query.search) {
      this.navIndex = ''
      console.log(this.$route.query.search)
      this.search = this.$route.query.search
      this.getSearchShop(this.$route.query.search)
      return
    }
    if (this.$route.query.zid) {
      console.log('id', this.$route.query.zid)
      this.showdetailFlag = true;
      this.getShopDetail(this.$route.query.zid);
    }
    this.getRecommend()
    this.getConfig()
    this.showdetailFlag = false
  },
  watch: {
    //监听相同路由下参数变化的时候，从而实现异步刷新
    $route(to, from) {
      //做一些路由变化的响应
      /** 初始化其他数据 */
      // let pid = this.$route.query.num;
      this.navIndex = +this.$route.query.num || 0;
      if (this.$route.query.num && this.$route.query.num < 4) {
        this.navTopIndex = +this.$route.query.num;
      } else {
        this.navTopIndex = 4;
      }
      console.log("产品1", this.navIndex, this.navTopIndex);
      this.shopid = this.shopnav[this.navIndex].id;
      this.title = this.shopnav[this.navIndex].name;
      this.getShopList();
      this.showdetailFlag = false
      if (this.$route.query.zid) { // 产品详情
        console.log('id', this.$route.query.zid)
        this.showdetailFlag = true;
        this.getShopDetail(this.$route.query.zid);
      }
    },
  },
  methods: {
    // changeTitle(num) {
    //   if (+num == 0) {
    //     document.title = '消防水泵'
    //   } else if (+num == 1) {
    //     document.title = '控制柜'
    //   } else if (+num == 2) {
    //     document.title = '气体灭火'
    //   } else if (+num == 3) {
    //     document.title = '火灾报警'
    //   } else {
    //     document.title = '产品中心'
    //   }

    // },
    selShopNav(data, i) {
      this.showimg = ''
      this.page.cont = 1
      this.showdetailFlag = false;
      if (i < 4) {
        this.$router.push({
          path: "/page/details",
          query: {
            num: i
          }
        });
        return
      }
      if (this.$route.query.num) {
        this.$router.push({
          path: "/page/details",
          query: {
            num: i
          }
        });
        return
      }
      // 切换分类
      this.navIndex = i;
      this.title = data.name;
      this.shopid = data.id;
      this.getShopList(); // 商品对应列表
    },
    getShopClass() {
      // 商品分类
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index")
        .then((res) => {
          console.log("商品分类", res.data.result);
          this.shopnav = res.data.result;
          this.shopid = this.shopnav[0].id;
          if (this.$route.query.num) {
            console.log('******', this.$route.query.num)
            this.shopid = this.shopnav[this.$route.query.num].id;
          }
          this.getShopList();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShopList() {
      if (this.search) return
      // 商品列表
      var _this = this;
      _this.$ajax
        .get(
          "http://api.wld119.com/api/v1/goods/indexs?id=" +
            this.shopid +
            "&page=" +
            this.page.cont +
            "&limit=" + this.page.size
        )
        .then((res) => {
          console.log("商品列表", res.data.result);
          this.page.total = res.data.result.total;
          this.page.allcont = res.data.result.per_page;
          this.shopList = res.data.result.data;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              item.flag = false;
            }
            this.shopList[0].flag = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    sizechange(a) {
      console.log(a);
      this.page.cont = a;
      this.shopList = []
      this.getShopList();
    },
    getRecommend() {
      // 商品推荐列表
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/recommend?limit=6")
        .then((res) => {
          console.log("商品推荐列表", res.data.result);
          this.recommendList = res.data.result
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getSearchShop (title) {
      // 搜索商品列表
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/like?title=" + title)
        .then((res) => {
          console.log("搜索商品详情", res.data.result);
          this.search = ''
          this.shopList = res.data.result.data;
          if (this.shopList.length > 0) {
            for (const item of this.shopList) {
              item.flag = false;
            }
            this.shopList[0].flag = true;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getShopDetail(id) {
      // 商品详情
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/goods/index_info?id=" + id)
        .then((res) => {
          console.log("商品详情", res.data.result);
          this.showdetailFlag = true;
          this.shopDetail = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    goshopDetail(id) {
      window.scrollTo(0, 400);
      this.$router.push({
        path:'/page/details',
        query: {
          num: this.navIndex,
          zid: id,
        },
      })
      this.getShopDetail(id);
    },
    goimmediately(){
      this.$router.push({path:'/page/about?num=6'})
    },
    mouseOver(i) {
      for (const item of this.shopList) {
        item.flag = false;
      }
      this.shopList[i].flag = true;
      this.$forceUpdate();
    },
    prev() {
      this.$refs.swiper.$swiper.slidePrev();
    },
    next() {
      this.$refs.swiper.$swiper.slideNext();
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  destroyed() {
    console.log("***");
  },
};
</script>

<style scoped>
/* 横幅 */
.ufo img {
  width: 100%;
  min-width: 1200px;
}
/* 横幅 */
/* 内容开始 */
.conten {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
/* .top{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
} */
/* 侧边栏开始 */
.liebiao {
  width: 300px;
  margin-top: 1em;
  float: left;
  overflow: hidden;
}
.navse li {
  font-size: 20px;
  padding: 10px;
  background: #f5f5f5;
  border: 0;
  margin: 5px;
  text-align: center;
}
.navse a:link,
.navse a:visited {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
}
.navse li:hover {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
  background-color: #0061ae;
}
.navse .active {
  text-decoration: none;
  font-size: 20px;
  color: #ffffff;
  background-color: #0061ae;
}
.navxe {
  padding: 40px 50px;
  text-align: left;
  border: 1px solid #c2c2c2;
  margin-top: 20px;
}
.navxe p {
  line-height: 30px;
  color: #333;
  font-size: 16px;
}
.navxe p:first-child {
  text-align: center;
  font-weight: bold;
}
/* .navxe {
  width: 290px;
  height: 200px;
  margin-top: 2em;
  border-style: solid;
  border-width: 1px;
  margin-left: 5px;
}
.navxe h3 {
  text-align: center;
  margin-top: 1em;
}
.navxe p {

  padding: 1px;
  margin-top: 10px;
} */
/* 侧边栏结束 */
/* 测试 */
/* .ceshi0{
  width: 860px;
  float: left;
} */
.top{
  overflow: hidden;
}
.ceshi {
  overflow: hidden;
  float: left;
  width: 420px;
  border: 1px solid #c2c2c2;
  margin-top: 22px;
  margin-left: 25px;
}
.ceshi-top {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.ceshi-wenben {
  width: 200px;
  height: 100px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.ceshi1 {
  width: 280px;
  padding-top: 55px;
  padding-left: 30px;
}
.ceshi2 {
  padding-top: 30px;
  padding-right: 20px;
}
.ceshi2 img{
  width: 170px;
}
.ceshi-btn {
  padding-top: 20px;
}
.ceshi-btn span:first-child {
  background: #0061ae;
  color: #fff;
}
.ceshi-btn span {
  border: 1px solid #0061ae;
  padding: 3px 5px;
  color: #0061ae;
  margin-left: 10px;
}
.ceshi-foot {
  text-align: center;
  font-weight: bold;
  padding: 10px;
}
/* 测试 */
/* 详情开始 */
.xiangqing {
  width: 860px;
  float: left;
  overflow: hidden;
  margin-top: 20px;
  margin-left: 25px;
}
.lishi{
  display: flex;
}
.tu img {
  width: 340px;
  height: 340px;
}
.tu {
  width: 360px;
  height: 360px;
  float: left;
  overflow: hidden;
  border: 1px solid #c2c2c2;
}
.tupian img {
  width: 110px;
  height: 110px;
  float: left;
  /* margin-top: 10px; */
}
.swipers{
  margin-top: 20px;
  /* margin-right: 15px; */
  border: 1px solid #c2c2c2;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.zixun {
  width: 390px;
  /* padding: 10px; */
  overflow: hidden;
  padding-left: 70px;
}
.zixun h2 {
  font-weight: bold;
  font-size: 22px;
  color: steelblue;
}
.text {
  height: 185px;
  border-top: 2px solid steelblue;
  border-bottom: 2px solid steelblue;
}
.text p {
  width: 390px;
  height: 130px;
  font-size: 13px;
  margin-top: 10px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.text span {
  display: block;
  width: 50px;
  font-size: 10px;
  color: #fff;
  padding: 3px 20px;
  background: #d6af62;
  border: 0;
  border-radius: 20px;
}

.introduce  {
  padding-top: 20px;
}



/* 详情结束 */
.newsbox_btm {
  width: 35%;
  margin: 0 auto;
}
/* 产品推荐开始 */
.tuijian {
  width: 1200px;
  margin: 0 auto;
  height: 250px;
  padding-top: 30px;
  overflow: hidden;
}

.wen {
  border-left: 3px solid #333;
}
.wen h5 {
  margin-left: 15px;
  margin-bottom: 15px;
}
.chanp {
  border-top: 1px solid #333;
  width: 1200px;
  position: relative;
}
.wenen {
  width: 1005px;
}
.wenen img {
  width: 170px;
  margin-top: 25px;
  border: 1px solid #c2c2c2;
  /* padding-bottom: 10px; */
  box-sizing: border-box;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-button-prev {
  position: absolute;
  top: 10%;
  left: 85%;
  background: steelblue;
  color: #fff;
  width: 60px;
  height: 180px;
  overflow: hidden;
  margin-top: 0;
}
.swiper-button-next {
  position: absolute;
  top: 10%;
  right: 5%;
  background: #d6af62;
  color: #fff;
  width: 60px;
  height: 180px;
  overflow: hidden;
  margin-top: 0;
}
/* 产品推荐结束 */

/* 商品开始 */
.pro1 {
  width: 895px;
  float: left;
}
.pro1 ul li {
  float: left;
  /* width: 178px; */
  position: relative;
  height: 273px;
  background-image: -moz-linear-gradient(left, #eeeeee, #e2e2e2);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.pro1 ul li em {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 33px;
  font-size: 16px;
  color: #000;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 0 7%;
}
.pro1 ul li .cc {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  top: 240px;
  font-size: 16px;
  color: #000;
  font-style: normal;
  text-align: center;
  box-sizing: border-box;
  padding: 0 7%;
}
.pro1 ul li em span {
  display: block;
  font-size: 14px;
  padding-top: 11px;
  line-height: 100%;
}
.pro1 ul li p {
  display: none;
}
.pro1 ul li b .bb {
  display: inline-block;
  position: absolute;
  bottom: 41px;
  margin-left: 26px;
  left: 0;
}
.pro1 ul li b .aa {
  display: none;
}
.item {
  width: 178px;
  height: 100%;
  float: left;
  position: relative;
}
.pro1 ul li .cur {
  float: left;
  background: #0061ae;
  width: 348px;
  height: 273px;
}
.pro1 ul li .cur em {
  display: none;
}
.pro1 ul li .cur b .aa {
  display: inline-block;
  position: absolute;
  top: 41px;
  right: 35px;
  display: block;
}
.pro1 ul li .cur b .bb {
  display: none;
}
.pro1 ul li .cur p {
  color: #fff;
  position: absolute;
  text-align: left;
  top: 4px;
  width: 100%;
  display: block;
}
.pro1 ul li .cur p em {
  display: block;
  width: 192px;
  height: 122px;
  line-height: 18px;
  font-size: 12px;
  font-style: normal;
  color: #fff;
  text-align: left;
}
.cur p em span {
  display: block;
}
.cur p strong {
  display: block;
  width: 57px;
  height: 19px;
  border-radius: 39px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 19px;
  font-weight: normal;
  font-size: 12px;
  position: absolute;
  left: 35px;
  top: 178px;
}
/* 商品1结束 */
</style>
<style>
.introduce img{
  width: 100%;
}
</style>
